<template>
  <div class="find-car-detail page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar title="寻车详情" fixed placeholder :border="false">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="goback" />
      </template> -->
    <!-- 导航栏右侧查看更多按钮 -->
    <!-- <template #right>
        <van-icon name="ellipsis" size="18" @click="getMoreChange" />
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title" typePage='寻车管理'></navbar>
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      > -->
    <div  class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
    <!-- 根据状态判断显示 -->
    <div class="judge-order" :class="orderStatus()">
      <span>{{ message }}</span>
    </div>

    <!-- 根据状态不同显示不同页面 -->
    <!-- 待生成订单-->
    <div class="to-be-paid" v-if="this.findCarStatus == '00'">
      <application-info :applicationInfo="applicationInfo"></application-info>
      <div class="user-brevity">
        <div>
          <div class="left">姓名</div>
          <div class="right">{{ applicationInfo.userName }}</div>
        </div>
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
      </div>
      <div class="btn_vant">
        <van-button type="info" style="margin-bottom: 0;" size="large" @click="createOrder"
          >生成订单</van-button
        >
      </div>
    </div>

    <!-- 待支付 -->
    <div v-if="this.findCarStatus == '01'">
      <!-- <find-car-inform></find-car-inform> -->
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
      </div>
     <!--  <div class="agreement">
        <van-checkbox
          v-model="checked"
          shape="square"
          checked-color="#F6C401"
          icon-size="16px"
        >
          <span>已阅读并同意<a href="">《寻车协议》</a></span>
        </van-checkbox>
      </div> -->
    </div>

    <!-- 已支付 -->
    <div
      v-if="
        this.findCarStatus == '02' ||
        this.findCarStatus == '03' ||
        this.findCarStatus == '04' ||
        this.findCarStatus == '05'
      "
    >
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div>
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <div>
          <div class="left">退款时间</div>
          <div class="right">{{ applicationInfo.orderRefundTime }}</div>
        </div>
      </div>

      <!-- 底部下载支付二维码按钮 -->
      <div class="btn_vant"><!--  style="margin-bottom:60px;" -->
        <!-- <van-button v-if="this.findCarStatus !== '03'" type="info" size="large" @click="downloadBuyCarBook"
          >下载购车事项通知书</van-button
        > -->
      </div>
      <!-- <div v-if="this.findCarStatus !== '04' || this.findCarStatus !== '04'" class="btn_vant"> v-else -->
        <!-- <van-button type="info" size="large" @click="editBuyCarBook"
          >编辑购车事项通知书</van-button
        > -->
      <!--</div> -->
    </div>

    <!-- 已完结 -->
    <div v-if="this.findCarStatus == '06'">
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <advice-note :applicationInfo="adviceInfo"></advice-note>
      <another-file :fileImage="fileImage" :isUploading="isUploading"></another-file>
      <div class="someTime">
        <div class="time_box_bottom">
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div class="time_box_bottom">
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div class="time_box_bottom">
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <div class="time_box_bottom">
          <div class="left">完结时间</div>
          <div class="right">{{ applicationInfo.orderCompletionTime }}</div>
        </div>
      </div>
    </div>

    <!-- 已取消 -->
    <div v-if="this.findCarStatus == '07'">
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <advice-note :applicationInfo="adviceInfo"></advice-note>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div>
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <!-- <div>
          <div class="left">完结时间</div>
          <div class="right">{{ applicationInfo.orderCompletionTime }}</div>
        </div> -->
        <div>
          <div class="left">取消时间</div>
          <div class="right">{{ applicationInfo.cancelTime }}</div>
        </div>
      </div>
    </div>
    <!-- </van-list> -->
    <!-- </van-pull-refresh> -->

    <!-- 更多操作弹出层 -->
    <!-- <van-popup
      v-model="showMoreHandle"
      round
      position="bottom"
      :style="{ width: '90%', height: '206px', margin: '0 0 0 5%' }"
    > -->
    <!-- <div class="popup_big_box">
        <div class=""
          v-if="this.findCarStatus == '04'"
          style="margin-top: 22px"
          @click="finishOrderClick"
        >
          <span style="color: red">完结</span>
        </div>
        <van-divider v-if="this.findCarStatus == '04'" />
        <div style="margin-top: 22px">
          <span style="color: red">退款</span>
        </div>
        <van-divider />
        <div
          v-if="this.findCarStatus == '00' || this.findCarStatus == '01'"
          @click="cancelOrderClick"
        >
          <span style="color: red">取消订单</span>
        </div>
        <van-divider
          v-if="this.findCarStatus == '00' || this.findCarStatus == '01'"
        />
        <div @click="showMoreHandle = false">
          <span style="color: blue">取消</span>
        </div>
      </div> -->
    <!-- </van-popup> -->
      <div class="btn_vant"><!-- style="margin: 0 2vw 0vw 2vw;" v-else -->
      <!-- <div class="bottom_status_box" style="margin-bottom:58px;"> -->
        <!-- <button>取消</button>
        <button v-if="orderInfo.price !== ''" @click="payFor()">
          支付￥{{ orderInfo.price }}
        </button> -->
        <!-- <van-button v-if="this.findCarStatus == '01'"
        type="info"
        size="large"
        @click="downloadPayQRCode"
        >下载支付二维码</van-button>  -->
      <!-- <van-button v-if="this.findCarStatus == '01'"
        type="info"
        size="large"
        @click="downloadPayQRCodeDemo"
        >下载支付二维码(开发test)</van-button>  -->
        <van-button v-if="this.findCarStatus == '01'"
        type="info"
        size="large"
        @click="downloadPayQRCodeDemo"
        >下载支付二维码</van-button> 
      <!-- v-else  v-if="orderInfo.price !== ''" -->
        <!-- <button  @click="checkFindCar">确认寻车</button> -->
        <!-- 弹出层 -->
        <van-popup v-model="show" position="bottom" class="selectPay">
          <p style="margin-top:15px;">选择支付方式</p>
          <div class="pay-img-box">
            <img
              @click="wechatPay"
              src="../../../assets/image/微信支付.png"
              alt=""
            />
            <img
              @click="zhiFuBaoPay"
              src="../../../assets/image/支付宝支付.png"
              alt=""
            />
          </div>
        </van-popup>
      <!-- </div> -->
      <!-- <div class="btn_vant">style="margin: 0 2vw 0vw 2vw;" v-else -->
        <!-- <div class="is_pass_book"> -->
          <van-button v-if="this.findCarStatus == '03'" size="large" @click="onAgreeFindCar"
          >通过</van-button
        >
        <van-button v-if="this.findCarStatus == '03'" size="large" @click="onRejectFindCar"
          >拒绝</van-button
        >
        <!-- </div> -->
      <!-- </div> -->
      <!-- <div class="btn_vant" > style="margin-bottom:60px;" -->
        <van-button v-if="this.findCarStatus == '04' || this.findCarStatus == '06' || this.findCarStatus == '07' && this.isDownLoadFile !== false" type="info" size="large" @click="downloadBuyCarBook"
          >下载购车事项通知书</van-button
        >
      <van-button v-if="this.findCarStatus == '02' || this.findCarStatus == '03' || this.findCarStatus == '05'" type="info" size="large" @click="editBuyCarBook"
          >编辑购车事项通知书</van-button
        >
    <!-- <div class="bottom_status_box">
      </div> -->
      <van-button v-if="this.findCarStatus == '04'"
        type="info"
        size="large"
        @click="finishOrderClick"
        >完结</van-button
      ><van-button v-if="this.findCarStatus == '02' || this.findCarStatus == '04' || this.findCarStatus == '05' || this.findCarStatus == '06' || this.findCarStatus == '07'" type="danger" size="large"
        @click="refundOrderClick"
        >退款</van-button
      >
      <van-button
        v-if="this.findCarStatus == '00' || this.findCarStatus == '01' || this.findCarStatus == '02' || this.findCarStatus == '03' || this.findCarStatus == '04' || this.findCarStatus == '05'"
        size="large"
        @click="cancelOrderClick"
        >取消订单</van-button
      >
    </div>
    </div>
  </div>
</template>

<script>
import applicationInfo from "../../../components/common/applicationInfo.vue";
import findCarInform from "../../../components/common/findCarInform.vue";
import completeInfo from "../../../components/common/completeInfo.vue";
import adviceNote from "../../../components/common/adviceNote.vue";
import anotherFile from "../../../components/common/anotherFile.vue";
import { getCarManagementCPay, getWAlipayAlipay,getOfMortgageIntentionCCheck } from "./api";
import { Dialog } from 'vant';

import {
  getCarManagementCMyId,
  getCarManagementCCancelOrder,
  getCarManagementCUpdataStatus,
  getCarManagementCRefund
} from "../api";
import { Toast } from "vant";

export default {
  components: {
    applicationInfo,
    findCarInform,
    completeInfo,
    adviceNote,
    anotherFile,
  },
  data() {
    return {
      // header栏 => 标题
      title:"寻车详情",
      message: "",
      userInfo: {
        name: "刘余旭",
        submitTime: "2021-9-10 12:13:12",
      },
      orderInfo: {
        price: "",
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      checked: true,
      applicationInfo: {},
      fileImage:[/* 
        {
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fb8%2F0b%2F0c%2Fb80b0cb894ca9523748dfb83ed971fb3.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640309473&t=0f465b08c770ace7cba60b494b7aa1d8'
        },
        {
          url:'https://img1.baidu.com/it/u=1765464561,3100748160&fm=26&fmt=auto'
        },
        {
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F02%2F20160802001436_CtfiH.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640316282&t=f84e96e58f646ee27f6c1cd1684cdbad'
        },
        {
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2Ff8%2F3a%2F37%2Ff83a371f767b48b2f7e19ef7ac6b4ad9_8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640316282&t=55ac7fc0356ad7a061c3e86d2aa08ba1'
        }
       */],
      isUploading:true,
      adviceInfo: {},
      completeInfo: {
        guidePrice: "409800.00",
        area: "广东省广州市",
        carColor: "黑色",
        preferPrice: "398000.00",
        name: "朱闪闪",
        msgPrice: "600",
      },
      show: false,
      showMoreHandle: false,
      // 寻车状态
      findCarStatus: "",
      // 订单id
      orderId: "",
      // 获取公网ip
      myIpAddress:'',
      // 下载支付二维码页面数据
      QRcodeList:{
        informationCosts:'',
        orderMessageList:[]
      },
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:'',
        pdfForm:{},
        // 是否需要完善购车事项通知书
        isLoadingOrEdit:false
    };
  },
  methods: {
    // 获取寻车管理详情
    async initCarManagementCMyId() {
      let id = this.$route.query.id;
      const { data } = await getCarManagementCMyId(id);
      this.findCarStatus = data.status;
      
      if (data.noticeOfMortgageIntentionC == null) {
        this.isDownLoadFile = false
      }
      this.orderId =
        data.noticeOfMortgageIntentionC !== null
          ? data.noticeOfMortgageIntentionC.id
          : "";
      this.applicationInfo = data
      this.applicationInfo.informationCosts = this.applicationInfo.informationCosts / 100
      this.applicationInfo.carModelGuidePrice = this.applicationInfo.carModelGuidePrice / 10000
      /* let numData = String(this.applicationInfo.carModelGuidePrice).split('.')[1]
      if (Number(numData)>5) {
        let newData = String(this.applicationInfo.carModelGuidePrice).split('.')[0]
        newData = Number(newData) + 1
        this.applicationInfo.carModelGuidePrice = newData
      }else{
        let newData = String(this.applicationInfo.carModelGuidePrice).split('.')[0]
        this.applicationInfo.carModelGuidePrice = newData
      } */
      /* this.adviceInfo = {
        totalAmount:data.totalAmount,
        ...data.noticeOfMortgageIntentionC
      } */
      this.adviceInfo = data.noticeOfMortgageIntentionC !==null ? data.noticeOfMortgageIntentionC : []
      if (this.adviceInfo.paymentMethod == '' || this.adviceInfo.paymentMethod == null || this.adviceInfo.paymentMethod == undefined) {
        this.adviceInfo.paymentMethod = '---'
      }else if (this.adviceInfo.paymentMethod == '01') {
        this.adviceInfo.paymentMethod = '全款'
      }else if (this.adviceInfo.paymentMethod == '02') {
        this.adviceInfo.paymentMethod = '按揭'
      }else{
        this.adviceInfo.paymentMethod = this.adviceInfo.paymentMethod
      }

      this.adviceInfo.carWay = this.adviceInfo.carWay !== '' || this.adviceInfo.carWay !== null || this.adviceInfo.carWay !== undefined ? this.adviceInfo.carWay == '01' ? '到店自提' : '平台送车上门' : '---'
      this.fileImage = data.queryCarFiles !== null ? data.queryCarFiles : []
      this.orderInfo.price = data.informationCosts;
      // 获取寻车状态
      this.judgeOrder();
      // 获取寻车状态对应样式
      this.orderStatus();
      
      let carModelGuidePrice = data.carModelGuidePrice
      console.log('%c [ carModelGuidePrice ]-388', 'font-size:13px; background:pink; color:#bf2c9f;', carModelGuidePrice)
      carModelGuidePrice = String(carModelGuidePrice).replace(/^(.*\..{4}).*$/, '$1')
      carModelGuidePrice = Number(carModelGuidePrice) + '万元'
      
      let carModels = data.carModels.length > 42 ? data.carModels.slice(0, 40) + '...' : data.carModels
      this.QRcodeList = {
          informationCosts:data.informationCosts,
          orderMessageList:[
            {
              left:'车型',
              // right: data.carModels.split('款')[0] + '款'
              right: carModels
            },
            {
              left:'指导价',
              right: carModelGuidePrice
            },
            {
              left:'地区',
              right: data.region
            },
            {
              left:'颜色',
              right: data.carColor
            },
            {
              left:'姓名',
              right: data.userName
            },
            {
              left:'电话',
              right: data.contactWay
            }
          ]
        }
        // 下载购车事项通知书
        let res = data
        this.pdfForm = {
        // 客户信息
          clientInfo: [
            {
              left: '姓名：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.clientName : ''
            },
            {
              left: '身份证号：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.identityCard : ''
            },
            {
              left: '联系方式：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.mobile : ''
            },
            {
              left: '上牌地区：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.registrationArea : ''
            }
          ],
          // 车型确认
          carTypeCheck: [
            {
              left: '品牌名称：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.brand : ''
            },
            {
              left: '车型版本：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.carModels.length > 42 ? res.noticeOfMortgageIntentionC.carModels.slice(0, 40) + '...' : res.noticeOfMortgageIntentionC.carModels : ''
            },
            {
              left: '指导价：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.guidedPrice / 10000 + '万' : ''
            },
            {
              left: '颜色：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.carColor : ''
            },
            {
              left: '数量：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.quantity : ''
            },
            {
              left: '合计金额：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.amount : ''
            },
            {
              left: '大写：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.amountBig : ''
            }
          ],
          // 商家名称
          carBusiness: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.payee !== '' ? res.noticeOfMortgageIntentionC.payee : 'XXX' : 'XXX',
          // 付款方式 => 全款
          fullPayMethods: [
            {
              left: '户名：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '01' || res.noticeOfMortgageIntentionC.paymentMethod == '全款' ? res.noticeOfMortgageIntentionC.userName : '' : ''
            },
            {
              left: '账户：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '01' || res.noticeOfMortgageIntentionC.paymentMethod == '全款' ? res.noticeOfMortgageIntentionC.account : '' : ''
            },
            {
              left: '开户行：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '01' || res.noticeOfMortgageIntentionC.paymentMethod == '全款' ? res.noticeOfMortgageIntentionC.openingBank : '' : ''
            }
          ],
          // 付款方式 => 按揭
          mortgagePayMethods: [
            {
              left: '户名：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '02' || res.noticeOfMortgageIntentionC.paymentMethod == '按揭' ? res.noticeOfMortgageIntentionC.userName : '' : ''
            },
            {
              left: '账户：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '02' || res.noticeOfMortgageIntentionC.paymentMethod == '按揭' ? res.noticeOfMortgageIntentionC.account : '' : ''
            },
            {
              left: '开户行：',
              right: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.paymentMethod == '02' || res.noticeOfMortgageIntentionC.paymentMethod == '按揭' ? res.noticeOfMortgageIntentionC.openingBank : '' : ''
            }
          ],
          // 提车方式
          getCarWay: res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC.carWay : ''
        }
    },
    // 生成订单
    createOrder() {
      this.$router.push({
        name: "createdOrderFindCar",
        params: {
          applicationInfo: this.applicationInfo,
        },
      });
    },
    // 编辑购车事项通知书
    editBuyCarBook() {
      this.$router.push({
        // name:this.status == '00' ? 'createdOrderFindCar' : 'editBuyCarNotification'
        name: "editBuyCarNotification",
        query: {
          id: this.orderId,
          idOld: this.$route.query.id,
        },
      });
    },
    // 下载购车事项通知书
    downloadBuyCarBook() {
      
      // 判断是否需要完善购车事项通知书
      // if (res.noticeOfMortgageIntentionC == null) this.isLoadingOrEdit = true
      // let editBuyCarBook = res.noticeOfMortgageIntentionC !== null ? res.noticeOfMortgageIntentionC : []
      if (this.adviceInfo.clientName == null || this.adviceInfo.clientName == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.identityCard == null || this.adviceInfo.identityCard == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.mobile == null || this.adviceInfo.mobile == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.registrationArea == null || this.adviceInfo.registrationArea == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.brand == null || this.adviceInfo.brand == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.carModels == null || this.adviceInfo.carModels == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.guidedPrice == null || this.adviceInfo.guidedPrice == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.carColor == null || this.adviceInfo.carColor == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.quantity == null || this.adviceInfo.quantity == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.amount == null || this.adviceInfo.amount == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.amountBig == null || this.adviceInfo.amountBig == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.userName == null || this.adviceInfo.userName == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.account == null || this.adviceInfo.account == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.openingBank == null || this.adviceInfo.openingBank == '') this.isLoadingOrEdit = true
      if (this.adviceInfo.carWay == null || this.adviceInfo.carWay == '') this.isLoadingOrEdit = true
      if (this.isLoadingOrEdit == true && this.findCarStatus !== '04') {
        Dialog.confirm({
          title: '下载购车事项通知书',
          message: '您还未完善购车事项通知书,是否完善？',          
        })
          .then(() => {
            this.$router.push({
                name: "editBuyCarNotification",
                query:{
                  // pdfForm: this.pdfForm,
                  id: this.orderId,
                  idOld: this.$route.query.id,
                  // status: this.$route.query.status
                }
              });
          })
          .catch(() => {
            // Toast('已取消下载购车事项通知书')
          });
      } else {
        Dialog.confirm({
          title: '提示',
          message: '此操作将下载购车事项通知书, 是否继续?',          
        })
          .then(() => {
            this.$router.push({
                name: "downloadPdf",
                query:{
                  pdfForm: this.pdfForm,
                  id: this.$route.query.id,
                  status: this.$route.query.status
                }
              });
          })
          .catch(() => {
            // Toast('已取消下载购车事项通知书')
          });
      }
      
    },
    // 支付 点击后弹出层选择支付方式
    payFor() {
      if (this.checked == false) return Toast('请先阅读并同意《寻车协议》')
      this.show = true;

      /*let params = {
        id:this.$route.query.id,
        status:'02'
      }
      this.initCarManagementCUpdataStatus(params) */
    },
    // 点击下载支付二维码
    downloadPayQRCode(){
      // 修改提示栏距离顶部高度
      this.$notify({
			  message: '正在准备下载支付二维码，请耐心等待！',
			  type: 'success'
			});
        this.$nextTick(()=>{
          document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
        })
      // return
      setTimeout(()=>{
        this.$router.push({
          name:'downloadPayQRCodePage',
          query:{
            QRcodeList:this.QRcodeList,
            id:this.$route.query.id
          }
        })
      },3000)
    },
    // 点击下载支付二维码
    downloadPayQRCodeDemo(){
      // 修改提示栏距离顶部高度
      this.$notify({
			  message: '正在准备下载支付二维码，请耐心等待！',
			  type: 'success'
			});
        this.$nextTick(()=>{
          document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
        })
      // return
      setTimeout(()=>{
        this.$router.push({
          name:'downloadPayQRCodePageDemo',
          query:{
            QRcodeList:this.QRcodeList,
            id:this.$route.query.id
          }
        })
      },3000)
    },
    // 确认寻车
    checkFindCar() {
      Toast("确认寻车");
    },
    // 修改支付状态
    async initCarManagementCUpdataStatus(params) {
      const { data } = await getCarManagementCUpdataStatus(params);
      this.$router.push({
        name: "findCarManagement",
      });
    },
    goback() {
      localStorage.removeItem("idOld");
      this.$router.push({
        name: "findCarManagement",
      });
    },
    // 更多操作 => 弹出层
    getMoreChange() {
      this.showMoreHandle = true;
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        this.loading = false;

        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 获取寻车状态
    judgeOrder() {
      if (this.findCarStatus == "00") {
        this.message = "待生成订单";
      } else if (this.findCarStatus == "01") {
        this.message = "待支付";
      } else if (this.findCarStatus == "02") {
        this.message = "寻车中";
      } else if (this.findCarStatus == "03") {
        this.message = "购车事项通知书审核中";
      } else if (this.findCarStatus == "04") {
        this.message = "购车事项通知书审核通过";
      } else if (this.findCarStatus == "05") {
        this.message = "购车事项通知书审核不通过";
      } else if (this.findCarStatus == "06") {
        this.message = "已完结";
      } else if (this.findCarStatus == "07") {
        this.message = "已取消";
      }
    },
    // 获取寻车状态对应样式
    orderStatus() {
      if (this.findCarStatus == "00" || this.findCarStatus == "01") {
        return "active-wait";
      } else if (
        this.findCarStatus == "02" ||
        this.findCarStatus == "03" ||
        this.findCarStatus == "04" ||
        this.findCarStatus == "05"
      ) {
        return "finsh-pay";
      } else if (this.findCarStatus == "06" || this.findCarStatus == "07") {
        return "finsh";
      }
    },
    // 取消订单
    cancelOrderClick() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认取消订单？',
      })
        .then(async () => {
            let id = this.$route.query.id;
            const { data } = await getCarManagementCCancelOrder({ id });
            Toast('取消订单成功！')
            this.$router.push({
              name: "findCarManagement",
            });
        })
        .catch(() => {
          // on cancel
            // Toast('已取消操作！')
        });
    },
    // 完结订单
    finishOrderClick() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认完结订单？',
      })
        .then(() => {
          let params = {
            id: this.$route.query.id,
            status: "06",
          };
          this.initCarManagementCUpdataStatus(params);
                Toast('完结订单成功！')
          this.$router.push({
            name: "findCarManagement",
          });
        })
        .catch(() => {
          // on cancel
            // Toast('已取消操作！')
        });
    },
    // 退款订单
    refundOrderClick() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认退款？',
      })
        .then(() => {
          this.initCarManagementCRefund()
        })
        .catch(() => {
          // Toast('已取消操作！')
        })
    },
    async initCarManagementCRefund(){
      const data = await getCarManagementCRefund({id: this.$route.query.id,});
      if(data.code !== 0) return Toast(data.msg)
      Toast('退款成功！')
          this.$router.push({
            name: "findCarManagement",
          });
    },
    // 微信支付
    async wechatPay() {
      let params = {
        /* 测试数据 => start */
        // id: "06d01ccf-fd91-49a0-ad8a-49c19f41a88e",
        // payip: "47.114.190.170",
        /* 测试数据 => end */

        // 订单ID
        id:this.$route.query.id,
        // 公网IP
        // payip: this.myIpAddress,
        payip: window.payIp,
        // 支付方式
        type:'01'
      };
      const data = await getCarManagementCPay(params);
      let url = data.data;
      if (url == undefined) return Toast(data.msg)
      window.location.href = url;

      // 设置回调页面打开的tabs栏
      localStorage.setItem('activeFindCar','allFindCar')

      /* setTimeout(()=>{
        let value = {
          id:this.$route.query.id,
          status:'02'
        }
        this.initCarManagementCUpdataStatus(value)
      },3000) */
    },
    // 支付宝支付
    async zhiFuBaoPay() {
      let params ={
        // 订单ID
        id:this.$route.query.id,
        // 公网IP
        // payip: this.myIpAddress,
        payip: window.payIp,
        // 支付方式
        type:'02'
      }
      const data = await getCarManagementCPay(params)
      /* ap.tradePay({
        orderStr: data.data
      }, function(res){
        alert('进来了')
        ap.alert(res.resultCode);
      }); */
  
      let div = document.createElement('div')
      div.innerHTML = data.data
      document.body.append(div) 
      document.forms[0].submit()



      // 设置回调页面打开的tabs栏
      localStorage.setItem('activeFindCar','allFindCar')
      /* let value = {
        id: this.$route.query.id,
        status: "02",
      };
      this.initCarManagementCUpdataStatus(value); */
    },
    // 获取公网ip
    /* getMyIpAddress() {
      console.log('[ window ]', window.payIp)
      const axios = require("axios");
      axios({
        method: "post",
        // url: `/myIpAddress?ie=utf-8`,
        url: `/ip/?ie=utf-8`,
      })
        .then((res) => {
          let obj = res.data.split("=")[1].trim().split(";")[0];
          this.myIpAddress = JSON.parse(obj).cip;
          console.log('%c [ this.myIpAddress ]', 'font-size:13px; background:pink; color:#bf2c9f;', this.myIpAddress)
        })
        .catch(() => {
        });
    }, */
    // 点击通过
    onAgreeFindCar() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认通过购车事项通知书？',
      })
      .then(async () => {
        // on confirm
          let params = {
            id:this.orderId,
            status: '01'
          }
          const data = await getOfMortgageIntentionCCheck(
            params
          )
          if (data.code !== 0) return Toast(data.msg)
          Toast('已通过')
          // 初始化详情数据
          this.initCarManagementCMyId();

          })
          .catch(() => {
            // Toast('已取消操作！')
          })
        //
        },
    // 点击拒绝
    onRejectFindCar() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认拒绝购车事项通知书？',
      })
      .then(async () => {
        // on confirm
          let params = {
            id:this.orderId,
            status: '02'
          }
          const data = await getOfMortgageIntentionCCheck(
            params
          )
          if (data.code !== 0) return Toast(data.msg)
          Toast('已拒绝')
          // 初始化详情数据
          this.initCarManagementCMyId();

          })
      .catch(() => {
        // Toast('已取消操作！')
      })
        //
    }
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 进入支付页时先看看是否能获取到当前的公网IP
    console.log('[ window.payIp ]', window.payIp)
    // 订单id
    this.idNew = this.$route.query.id,
    // 初始化详情数据
    this.initCarManagementCMyId();
  },
  //设置背景颜色
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
};
</script>

<style scoped lang="less">
.selectPay {
  p {
    text-align: center;
  }
  .pay-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img:nth-child(1) {
      width: 110px;
      height: 110px;
      padding-right: 50px;
    }
    img:nth-child(2) {
      width: 90px;
      height: 90px;
    }
  }
}
.advice-note {
  margin: 8px 0;
}
.pay-for {
  display: flex;
  padding: 0 16px;
  button {
    flex: 1;
    height: 44px;
    border: none;
    background-color: #ffffff;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  button:nth-child(2) {
    background-color: #f6c401;
    margin-left: 9px;
  }
  button:nth-child(1) {
    border: 1px solid #e6e6e6;
  }
}
.agreement {
  padding: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  span {
    color: #666666;
    a {
      color: #f6c401;
    }
  }
}
.find-car-inform {
  margin-bottom: 8px;
}
.application-info {
  border: 1px solid #eeeeee;
}
.someTime {
  padding: 16px;
  div {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .left {
      color: #666666;
      margin: 1% 0;
    }
    .right {
      color: #333333;
      margin-right: 30px;
    }
  }
  .time_box_bottom{
    width:100vw;height:20px;
  }
}
.to-be-paid {
  .user-brevity {
    height: 100px;
    background-color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular, PingFang SC;
    margin-bottom: 20px;
    div {
      display: flex;
      justify-content: space-between;
      div {
        padding: 2% 0;
      }
      .left {
        font-size: 15px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.active-wait {
  background-color: rgba(254, 140, 25, 0.1);
  color: #fe8c19;
}
.finsh-pay {
  color: #0d7ef0;
  background-color: rgba(13, 126, 240, 0.1);
}
.finsh {
  color: #999999;
  background-color: rgba(153, 153, 153, 0.1);
}
.find-car-detail {
  width: 100%;
  height: 100%;
}
.judge-order {
  box-sizing: border-box;
  width: 375px;
  height: 40px;
  padding: 0 16px;
  span {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 40px;
  }
}
.btn_vant {
  // position: absolute;
  // bottom: 46vw;
  // bottom: 20vw;
  // left: 3vw;
  // right: 3vw;
  margin: 0 2vw 5vw 2vw;
  .is_pass_book{
    display: flex;
    justify-content: space-between;
  }
  button{
    margin-bottom: 5vw;
  }
}
.popup_big_box {
  div {
    display: flex;
    justify-content: center;
  }
}
.bottom_status_box {
  display: flex;
  // margin: 0 10px 0 10px;
  /* position: absolute;
  bottom: 3vw;
  left: 2vw;
  right: 2vw; */
  margin: 0 2vw 5vw 2vw;
}
</style>
<style lang="less">
.find-car-detail {
  .van-button--large {
    border-radius: 2vw;
    height: 12vw;
  }
}
</style>